<template>
  <div class="body_bg">
    <div class="container">
      <div class="right">
        <div class="r_title">
          <v-icon large color="#42A5F5">mdi-book-open-page-variant-outline</v-icon>
        </div>
        <div class="r_input">
          <!--账号 -->
          <v-text-field
              v-model="loginMsg.username"
              label="账号"
              placeholder="请输入..."
              filled
              rounded
              dense
              :rules="[v => !!v || '提示：不能为空！']"
          ></v-text-field>
          <!--密码-->
          <v-text-field
              v-model="loginMsg.password"
              label="密码"
              placeholder="请输入..."
              filled
              rounded
              dense
              :type="show ? 'text' : 'password'"
              @click:append="show = !show"
              :rules="[v => !!v || '提示：不能为空！']"
              :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
          ></v-text-field>

          <!--验证码 -->
          <v-row
              style="width: 90%;margin-left: 1%"
          >
            <v-col cols="12" sm="6"
            >
                <el-input v-model="loginMsg.code"  placeholder="验证码"></el-input>
            </v-col>
            <v-col cols="12" sm="6">
              <v-img :src="imgUrl" @click="getCaptcha"></v-img>
            </v-col>
          </v-row>
        </div>
        <div class="r_bt text-center">
          <v-btn
              depressed
              color="#42A5F5"
              rounded
              width="88%"
              height="40px"
              dark
              style="font-weight: bold;font-size: 16px"
              @click="login"
          >登录</v-btn>
        </div>
        <div class="r_registered">
          <span>没有账户？</span>
          <span style="color: #42A5F5" @click="toSignUp">注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {captcha, userLogin} from "../../network/Details/common/user";

export default {

  name: "Login",
  components:{

  },
  data(){
    return{
      //密码显示
      show:false,
      //账号
      loginMsg:{
        username:'',
        password:'',
        key:'',
        code:''
      },
      //提示
      snackbarShow:false,
      snackbarText:'',
      //验证码
      imgUrl:'',
    }
  },
  created() {
    this.getCaptcha();
    document.onkeydown = (e) => {
      e = window.event || e
      if (this.$route.path === '/login' && e.keyCode === 13) this.login()  // submitLoginForm() 为登录函数
    }
  },
  methods:{
    //获取验证码
    getCaptcha(){
      captcha().then( res => {
        this.imgUrl = res.data.base64Img;
        this.loginMsg.key = res.data.key;
      })
    },
    //登录
    login(){
      if(this.loginMsg.username.length === 0 || this.loginMsg.password.length === 0 || this.loginMsg.code.length === 0){
        this.$message.error("表单里还有未填的项！")
        return
      }
      userLogin(this.loginMsg).then(res=>{
        window.sessionStorage.setItem("username",this.loginMsg.username)
        if(res.code === 200){
          this.$message.success("登录成功！")
          this.$router.push('/home');
        }else{
          this.getCaptcha();
        }
      })
    },
    //跳转到注册
    toSignUp(){
      this.$router.push('/signup')
    }
  }
}
</script>

<style lang="less" scoped>
.body_bg{
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background-image: url("../../assets/img/home/bg.jpg");
  background-size: 100% 100%;
}
.container{
  width: 380px;
  height: 411px;
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 3px 2px 8px rgba(0,0,0,0.31);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 15px;
  display: flex;
  flex-direction: row;
  .right{
    height: 365px;
    width: 340px;
    display: flex;
    flex-direction: column;
    .r_title{
      height: 60px;
      display: flex;
      flex-direction: row;
      font-size: 22px;
      text-align: center;
      line-height: 60px;
      font-weight: bold;
      justify-content: space-evenly;
    }
    .r_title{

    }
    .r_input{
      margin-top: 20px;
      width: 90%;
      margin-left: 6%;
      .r_input_text{
        margin-top: 5px;
        width: 90%;
        height: 18px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-left: 5%;
      }
    }
    .r_bt{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .r_registered{
      margin-top: 10px;
      text-align: center;
      color: #666666;
      font-size: 13px;
    }

  }
}
</style>
